<template>
	<div>
		<!-- 顶部导航栏 -->
		<van-nav-bar title="商家店铺信息" style="background-color: #00ffff;">
			<template #right>
				<van-popover v-model:show="showPopover" theme="dark" :actions="actions" placement="bottom-end"
					@select="handleSelect">
					<template #reference>
						<van-icon name="bars" size="25" />
					</template>
				</van-popover>
			</template>
		</van-nav-bar>
		<div>
			<!-- 商家头像和商家名称 -->
			<div style="display: flex; align-items: center;">
				<van-image round width="6rem" height="6rem" fit="cover" src="" style="margin: 10px 30px 5px 10px;" />
				<p style="font-size: 25px;">{{sellerInfo.shopName}}</p>
			</div>
			<!-- 商家信息显示 -->
			<div v-show="updateInfoShow === false">
				<div class="shop-info">
					<p class="shop-info-p">用户名(手机号)：</p>
					<p>{{sellerInfo.phone}}</p>
				</div>
				<div class="shop-info">
					<p class="shop-info-p">店铺名称：</p>
					<p>{{sellerInfo.shopName}}</p>
				</div>
				<div class="shop-info">
					<p class="shop-info-p">店铺地址：</p>
					<p>{{sellerInfo.shopAddress}}</p>
				</div>
				<div class="shop-info">
					<p class="shop-info-p">联系人：</p>
					<p>{{sellerInfo.contactPerson}}</p>
				</div>
				<div class="shop-info">
					<p class="shop-info-p">联系电话：</p>
					<p>{{sellerInfo.contactNumber}}</p>
				</div>
				<div class="shop-info">
					<p class="shop-info-p">微信号：</p>
					<p>{{sellerInfo.weixinNumber}}</p>
				</div>
			</div>
			<!-- 商家信息修改界面 -->
			<div v-show="updateInfoShow === true">
				<van-form>
					<van-field v-model="sellerInfo.shopName" name="shopName" label="店铺名称" />
					<van-field v-model="sellerInfo.shopAddress" name="shopAddress" label="店铺地址" />
					<van-field v-model="sellerInfo.contactPerson" name="contactPerson" label="联系人" />
					<van-field v-model="sellerInfo.contactNumber" name="contactNumber" label="联系电话" />
					<van-field v-model="sellerInfo.weixinNumber" name="weixinNumber" label="微信号" />
				</van-form>
				<div style="display: flex; justify-content: center;">
					<van-button round type="danger" style="width: 30%; margin-right: 20px;"
						@click="updateInfoShow = false">取消</van-button>
					<van-button round type="info" style="width: 30%; margin-left: 20px;" @click="saveShopInfo">保存信息
					</van-button>
				</div>
			</div>
		</div>
		<!-- 修改密码对话框 -->
		<van-dialog v-model:show="updatePasswordShow" title="修改密码" show-cancel-button @confirm="savePassword">
			<van-form>
				<van-field v-model="updatePasswordForm.oldPassword" label="旧密码" placeholder="请输入旧密码" />
				<van-field v-model="updatePasswordForm.newPassword" type="password" label="新密码" placeholder="请输入新密码" />
				<van-field v-model="updatePasswordForm.confirmNewPassword" type="password" label="确认密码"
					placeholder="请确认新密码" />
			</van-form>
		</van-dialog>
		<my-tabbar :active="tabbarName"></my-tabbar>
	</div>
</template>

<script>
	export default {
		//使用inject导入引用的reload，然后直接调用即可
		inject: ["reload"],
		data() {
			return {
				tabbarName: "personal", //底部导航栏名称
				//商家信息
				sellerInfo: {
					id: 0,
					phone: "",
					shopName: "",
					shopAddress: "",
					shopAvatar: "",
					contactPerson: "",
					contactNumber: "",
					weixinNumber: "",
					shopImgs: ""
				},
				showPopover: false, //是否展示气泡弹出层
				actions: [{
						text: '修改信息',
						icon: 'edit'
					},
					{
						text: '修改密码',
						icon: 'lock'
					},
					{
						text: '退出登录',
						icon: 'close'
					}
				],
				updateInfoShow: false, //修改商家信息
				updatePasswordShow: false, //修改密码
				updatePasswordForm: {
					id: 0,
					oldPassword: "",
					newPassword: "",
					confirmNewPassword: ""
				}
			}
		},
		mounted() {
			let seller = this.$cookies.get("seller")
			this.sellerInfo = seller
			this.updatePasswordForm.id = seller.id
			// console.log(this.shopInfo)
		},
		methods: {
			handleSelect(action, index) {
				if (index == 0) {
					this.updateShopInfo()
				}
				if (index == 1) {
					this.updatePassword()
				}
				if (index == 2) {
					this.logOut()
				}
			},
			//修改商家信息界面
			updateShopInfo() {
				this.updateInfoShow = true
			},
			//修改密码界面
			updatePassword() {
				this.updatePasswordShow = true
			},
			//退出登录
			logOut() {
				this.$dialog.confirm({
					message: '是否退出登录'
				}).then(() => {
					let _this = this
					_this.$axios({
						method: 'post',
						url: '/seller/logout',
						data: {
							id: _this.sellerInfo.id
						}
					}).then((resp) => {
						if (resp.code == 200) {
							_this.$notify({
								type: 'success',
								message: '退出成功'
							})
							_this.$cookies.remove("seller")
							_this.$router.replace('/login')
						}
					})

				}).catch(() => {
					console.log("取消操作")
				})
			},
			//提交修改商家信息
			saveShopInfo() {
				this.$dialog.confirm({
					message: '是否保存信息'
				}).then(() => {
					let _this = this;
					_this.$axios({
						method: 'put',
						url: '/seller/updateInfo',
						data: _this.sellerInfo
					}).then((resp) => {
						if (resp.code == 200) {
							_this.$notify({
								type: "success",
								message: resp.msg
							})
							_this.sellerInfo = _this.sellerInfo
							_this.updateInfoShow = false
						}
					})
				}).catch(() => {
					console.log("取消保存")
				})
			},
			//提交修改密码
			savePassword() {
				let _this = this
				if (this.updatePasswordForm.newPassword === this.updatePasswordForm.confirmNewPassword) {
					_this.$axios({
						method: 'put',
						url: '/seller/updatePassword',
						data: {
							id: _this.updatePasswordForm.id,
							oldPassword: _this.$rsaEncrypt(_this.updatePasswordForm.oldPassword),
							newPassword: _this.$rsaEncrypt(_this.updatePasswordForm.newPassword)
						}
					}).then((resp) => {
						if (resp.code == 200) {
							_this.$notify({
								type: "success",
								message: resp.msg
							})
						}
					})
				} else {
					_this.$notify({
						type: "warning",
						message: "输入的新密码与确认密码不一致，请重新确认"
					})
				}
			}
		}
	}
</script>

<style scoped>
	.shop-info {
		display: flex;
		margin-left: 10px;
	}

	.shop-info-p {
		font-weight: bolder
	}
</style>
